<template>
  <card :title="title">
    <div class="app-pop">
      <form-item label="甲方名称">
        <input class="input" type="text" v-model="param.title">
      </form-item>
      <form-item label="应用ID">
        <input class="input" type="text" v-model="param.app_store_id" placeholder="App Store的ID,若没有则可不填">
      </form-item>
      <form-item label="Logo">
        <div class="form-logo">
          <input class="input" type="text" v-model="param.image" :readonly="isUploading"/><br/>
          <!-- <img class="preview" :src="param.image"/> -->
          <label v-if="param.image != ''" for="upload"><img class="preview" :src="param.image" for="upload"/></label>
          <label class="button is-primary" :class="{'is-loading': isUploading}" for="upload" v-else>点击上传</label>
          <input type="file" id="upload" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg">
        </div>
      </form-item>
      <form-item label="产品标签">
        <div class="tabs is-toggle">
          <ul>
            <li v-for="(tag, index) in tags" :class="{'is-active': index + 1 === param.charact_flag}">
              <a @click="selectTag(index + 1)"><span>{{tag}}</span></a>
            </li>
          </ul>
        </div>
      </form-item>
      <form-item label="成功贷款">
        <div class="field has-addons">
          <p class="control">
            <input class="input" type="text" v-model.number="param.succeed_loans">
          </p>
          <p class="control">
            <a class="button is-static">
              人
            </a>
          </p>
        </div>
      </form-item>
      <form-item label="借款额度">
        <input class="input" type="text" placeholder="最少借款额度(元)" v-model="param.min_credit">
        &nbsp;-&nbsp;
        <input class="input" type="text" placeholder="最多借款额度(元)" v-model="param.max_credit">
      </form-item>
      <form-item label="借款费用">
        <div class="field has-addons">
          <p class="control">
            <input class="input" type="text" placeholder="例:0.2%" v-model="param.expense_monthly">
          </p>
          <p class="control select is-primary">
            <select v-model.number="param.time_span">
              <option :value="0">每月</option>
              <option :value="1">每日</option>
            </select>
          </p>
        </div>
      </form-item>
      <form-item label="借款期限">
        <input class="input" type="text" placeholder="最少贷款天数(天)" v-model="param.min_audit">
         &nbsp;-&nbsp;
        <input class="input" type="text" placeholder="最多贷款天数(天)" v-model="param.max_audit">
      </form-item>
      <form-item label="最快放款">
        <input class="input" type="text" placeholder="例:1~30分钟 或者 1~2小时" v-model="param.lending_time">
      </form-item>
      <form-item v-for="item in desc" :label="item.title" :key="item.title">
        <textarea class="textarea" rows="3" v-model="item.content"></textarea>
      </form-item>
      <form-item label="攻略链接">
        <input class="input" type="text" v-model="param.ad_guide">
      </form-item>
      <form-item label="甲方链接">
        <input class="input" type="text" v-model="param.url">
      </form-item>
      <div class="button-box">
        <button class="button is-primary" @click="save">保存</button>
      </div>
    </div>
  </card>
</template>
<script>
import { FormItem } from '@/components/Common'
export default {
  name: 'pop',
  props: {
    type: { // new: 新增 / edit: 编辑
      type: String,
      default: 'new'
    },
    appId: {
      type: Number,
      default: -1
    }
  },
  components: {
    FormItem
  },
  computed: {
    title () {
      return this.type === 'new' ? '添加新产品' : '编辑产品'
    }
  },
  created () {
    if (this.type === 'edit') {
      this.$api.get(`ads/${this.appId}`).then(req => {
        this.param = {
          ...req
        }
        this.desc = Array.from(req.desc, item => {
          return {
            title: item.title,
            content: item.content.join('\n')
          }
        })
      })
    }
  },
  data () {
    return {
      isUploading: false,
      tags: ['放款快', '通过高', '额度大', '利息低'],
      param: {
        title: '',
        app_store_id: '',
        image: '',
        charact_flag: 1,
        succeed_loans: '',
        max_credit: '',
        min_credit: '',
        expense_monthly: '',
        time_span: 0,
        max_audit: '',
        min_audit: '',
        lending_time: '',
        ad_guide: '',
        url: ''
      },
      desc: [{
        title: '产品优势',
        content: ''
      }, {
        title: '申请条件',
        content: ''
      }, {
        title: '所需材料',
        content: ''
      }, {
        title: '所需授权',
        content: ''
      }]
    }
  },
  methods: {
    uploadImg (e) {
      // 上传图片
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      let data = new FormData()
      data.append('file', file)
      this.isUploading = true
      this.$api.post('ads/upload_img', data).then((req) => {
        this.isUploading = false
        this.$set(this.param, 'image', req)
      }).catch(() => {
        this.isUploading = false
        this.$openMessage({message: `上传图片失败`})
      })
      e.target.value = '' // 清空file里的图片 ps.修复第二次上传同样的图片不弹出弹窗
    },
    selectTag (tag) {
      this.$set(this.param, 'charact_flag', tag)
    },
    save () {
      let desc = Array.from(this.desc, item => {
        return {
          title: item.title,
          content: item.content.split('\n')
        }
      })
      let param = {
        ...this.param,
        desc
      }
      let action = this.type === 'new' ? 'post' : 'put'
      this.$api[action]('ads', param).then(req => {
        this.$openMessage({message: `${this.type === 'new' ? '添加' : '修改'}成功`, type: 'success'})
        this.$emit('close')
      }).catch(() => {
        this.$openMessage({message: `${this.type === 'new' ? '添加' : '修改'}失败`})
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-pop{
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#upload {
  position:absolute; clip:rect(0 0 0 0);
}
.preview{
  margin-top: 10px;
  width: 150px;
}
.form-logo{
  width: 100%;
  .input {
    margin-bottom: 10px;
  }
}
</style>
